

1. 同源策略

   是浏览器的安全策略

   对比协议,域名和端口号是否一致,如果有一个不一样,则认为不同源

   限制: cookie, localStorage, ajax

2. 跨域

    给不同源的地址发送请求ajax就是跨域

    解决跨域问题: 

        1. jsonp  只能用get请求, 没有兼容性问题

            原理: 利用script标签，不受同源策略限制实现的

            实现的步骤： 

                1. 需要发送请求的时候，动态创建script 
                2. 给script添加src属性,设置目标地址
                3. 将script标签添加到dom树上
                4. 全局定义函数,把函数名传给服务器. 把函数名拼接在url后面
                    script.src = '..../test?callback=函数名'
                5. 响应的是函数调用的字符串 
                    res.send(`${callback}(数据)`)

        2. cors  get和post都支持, 但是只有ie10+才支持

            一般直接使用中间件cors处理

            npm i cors 

            const cors = require('cors')

            app.use(cors())




3. formdata

    formdata使用时,只能选择post请求 

    <form id="form">
        <input type="text" name="username"/>
        <input type="text" />
        <button>按钮</button>
    </form>

    实现: 

        1. 实例化formdata 
        const formdata = new FormData(form的dom)

        formdata中有form表单里面所有的写了name属性的表单项的值

        2. const xhr = new XMLHttpRequest()

           xhr.open('post','url地址')

           无需设置请求头,会自动设置
           content-type: multiple/form-data

           xhr.send(formdata)


        查看formdata的数据: 
            formdata.get('键')

        往formdata中添加数据
            formdata.append('键', 值)

